{extend name="main"}
{block name="body"}
<div class="bg-white p-3">
<el-form :model="form" @submit.native.prevent="submitForm" :rules="rules" ref="form" label-width="120px" :label-position="labelPosition">

  <el-form-item label="分类等级" prop="pid">
    <el-cascader 
    	v-model="pid"
    	placeholder="试试搜索：单页"
    	filterable
		:props="defaultProps"
    	:options="cate"
     	:show-all-levels="false">
    </el-cascader>
  </el-form-item>

  <el-form-item label="分类名称" prop="title">
    <el-input v-model="form.title" class="col-12 col-sm-3 pl-0 pr-0" placeholder="Title"></el-input>
  </el-form-item>

  <el-form-item label="别名" prop="alias">
    <el-input v-model="form.alias" class="col-12 col-sm-3 pl-0 pr-0" placeholder="Alias"></el-input>
  </el-form-item>

  <el-form-item label="排序" prop="sort">
    <el-input v-model="form.sort" class="col-12 col-sm-3 pl-0 pr-0" placeholder="Sort"></el-input>
  </el-form-item>

  <el-form-item label="PC端" prop="pc_show">
    <el-radio-group v-model="form.pc_show">
      <el-radio :label="1">显示[默认]</el-radio>
      <el-radio :label="0">隐藏</el-radio>
    </el-radio-group>
  </el-form-item>

  <el-form-item label="APP端" prop="app_show">
    <el-radio-group v-model="form.app_show">
      <el-radio :label="1">显示[默认]</el-radio>
      <el-radio :label="0">隐藏</el-radio>
    </el-radio-group>
  </el-form-item>

  <el-form-item label="H5端" prop="h5_show">
    <el-radio-group v-model="form.h5_show">
      <el-radio :label="1">显示[默认]</el-radio>
      <el-radio :label="0">隐藏</el-radio>
    </el-radio-group>
  </el-form-item>

  <el-form-item label="微信小程序端" prop="mp_show">
    <el-radio-group v-model="form.mp_show">
      <el-radio :label="1">显示[默认]</el-radio>
      <el-radio :label="0">隐藏</el-radio>
    </el-radio-group>
  </el-form-item>

  <el-form-item label="支付宝小程序端" prop="alipay_show">
    <el-radio-group v-model="form.alipay_show">
      <el-radio :label="1">显示[默认]</el-radio>
      <el-radio :label="0">隐藏</el-radio>
    </el-radio-group>
  </el-form-item>

  <el-form-item label="百度小程序端" prop="baidu_show">
    <el-radio-group v-model="form.baidu_show">
      <el-radio :label="1">显示[默认]</el-radio>
      <el-radio :label="0">隐藏</el-radio>
    </el-radio-group>
  </el-form-item>

  <el-form-item label="头条小程序端" prop="toutiao_show">
    <el-radio-group v-model="form.toutiao_show">
      <el-radio :label="1">显示[默认]</el-radio>
      <el-radio :label="0">隐藏</el-radio>
    </el-radio-group>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="submitForm('form')">立即保存</el-button>
    <el-button @click="resetForm('form')">重置</el-button>
  </el-form-item>
</el-form>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	{empty name="cate"}
	var cate=[];
	{else/}
	var cate={:json_encode($cate,JSON_UNESCAPED_UNICODE)};
	{/empty}
	{empty name="Find"}
	var url='/article/addCate';
	var is_edit=false;
	var	pid=[];
	var formData={
				pid:0,
				title:'',
				alias:'',
				pc_show:1,
				app_show:1,
				h5_show:1,
				mp_show:1,
				alipay_show:1,
				baidu_show:1,
				toutiao_show:1,
				sort:99
			};
	{else/}
	var url='/article/editCate/{$Find.id}';
	var is_edit=true;
	var formData={:json_encode($Find,JSON_UNESCAPED_UNICODE)};
	var pid=[];
	for (var i = 0; i < cate.length; i++) {
		if(cate[i].id==formData.pid){
			pid.push(cate[i].id);
			break;
		}else if(cate[i].data){
			for (var j = 0; j < cate[i].data.length; j++) {
				if(cate[i].data[j].id==formData.pid){
					pid.push(cate[i].id);
					pid.push(cate[i].data[j].id);
					break;
				}else if(cate[i].data[j].data){
					for (var n = 0; n < cate[i].data[j].data.length; n++) {
						if(cate[i].data[j].data[n].id==formData.pid){
							pid.push(cate[i].id);
							pid.push(cate[i].data[j].id);
							pid.push(cate[i].data[j].data[n].id);
							break;
						}
					}
				}
			}
		}
	}
	{/empty}
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			cate: cate,
			labelPosition:'right',
			form:formData,
			is_edit:is_edit,
			pid:pid,
	        defaultProps: {
	          	value: 'id',
	          	label: 'title',
	          	children: 'data',
	          	checkStrictly:true
	        },
	        rules: {
		      title: [
		        { required: true, message: '请输入分类名称', trigger: 'blur' },
		        { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
		      ],
	        }
		},
		watch:{
		    view:XYBase.viewWatch,
		    pid(val,oldVal){
				if (val.length>0) {
				this.form.pid=val[val.length-1];
				}
		    },
		},
		created(){
			XYBase.created(this);
		},
		methods:{
			submitForm:function(formName) {
				var _this=this;
				var D=_this.form;
				_this.$refs[formName].validate((valid) => {
				  if (valid) {
					const loading = XYBase.openloading();
					$.ajax({
						url:url,
						data:D,
						type:'post',
						dataType:'json',
						success:function(ret){
					        loading.close();
					        if (ret) {
								if(ret.code == 0){
									XYBase.success(ret.msg);
									if(!_this.is_edit){
										_this.resetForm(formName);
									}
								}else{
									XYBase.msg(ret.msg);
								}
					        }else{
				          		XYBase.error(XYBase.config.system_network_error)
					        }
						},
						error:function(err){
					        loading.close();
				          	XYBase.error(XYBase.config.system_network_error)
						}
					});
				  } else {
					XYBase.warning('请先把表单填写完整。');
				    return false;
				  }
				});
			},
			resetForm:function(formName) {
				this.pid=pid;
				this.$refs[formName].resetFields();
			},
		}
	});
$(function(){
	reloadWindowSize();
	$(window).resize(function(){
		reloadWindowSize();
	});
});
function reloadWindowSize (argument) {
	var winW=$(window).width();
	if(winW <= 576){
		vm.labelPosition='top';
	}else{
		vm.labelPosition='right';
	}
}
</script>
{/block}